<!-- 内部网盘 -->
<template>
  <div>
    <!--<div style="font-size: 0;margin: 10px 0 20px;">-->
      <!--<div class="head" :class="diskType==='1'&&'head-active'" @click="changeRole('1')">个人网盘</div>-->
      <!--<div class="head" :class="diskType==='2'&&'head-active'" @click="changeRole('2')">部门网盘</div>-->
    <!--</div>-->
    <div class="netdisk-list-container">
    <!-- tab选框 -->
    <div class="netdisk-menu">
      <div class="netdisk-menu-main">
        <ul>
          <li class="netdiskMenu" v-for="(menu,index) in menuMain" :key="index" @click="changeTap(menu)" :class="currentTap==menu.name?'is-active':''">
            <i :class="menu.icon"></i>
            <span>{{menu.title}}</span>
          </li>
        </ul>
      </div>
    </div>
    <!-- netdisk组件 -->
    <div class="netdisk-content">
      <div class="netdisk-handle">
        <ul style="margin: 0 10px;">
          <li class="netdisk-handle-li">
            <!--<el-upload class="upload-demo"  action="/boot/sys/common/upload" :on-change="handleChange"  style="display:inline-block">-->
              <span class="icon iconfont icon-shangchuan btn btn-danger" @click="upload" v-show="currentTap!=='share'">
                <span class="upload" style="padding:0 6px;font-size:14px;cursor:pointer">上传</span>
              </span>  
            <!--</el-upload>      -->
            <span class="icon iconfont icon-xiazai btn btn-primary" @click="download">
              <span class="download" style="padding:0 6px;font-size:14px;cursor:pointer">下载</span>
            </span>           
            <span class="icon iconfont icon-fenxiang btn btn-success" @click="share" v-show="currentTap!=='share'">
              <span class="share" style="padding:0 6px;font-size:14px;cursor:pointer">分享</span>
            </span>
            <span class="icon iconfont icon-shanchu btn btn-gray" @click="deleteFile">
              <span class="delete" style="padding:0 6px;font-size:14px;cursor:pointer">删除</span>
            </span>          
            <span @click="createFolder" v-show="currentTap==='all'" class="icon iconfont icon-xinjianwenjianjia btn" id="btn-white">
              <span class="newfile" style="padding:0 6px;font-size:14px;cursor:pointer">新建文件夹</span>
            </span>
            <div style="position: relative;display: inline-block;">
              <el-input
                id="search"
                v-model.lazy="keyWord"
                class="input_style"
                placeholder="输入查询关键字"
              >
                <i
                  slot="prefix"
                  class="iconfont icon-sousuo"
                  style="line-height: 33px;color: #ffffff;margin-left: 10px;margin-right:10px;font-size: 12px"
                ></i>
                <i
                  slot="suffix"
                  :class = "transformIcon == true ? 'iconfont icon-caidan' : 'iconfont icon-caidan-copy'"
                  ref="caidanIcon"
                  style="line-height: 32px;cursor: pointer;color: #ffffff;margin-right: 10px;font-size: 14px;display:inline-block"
                  @click="showQueryFields"
                ></i>
              </el-input>
              <el-button
                @click="search('')"
                class="button-search"
                style="width:86.15px;height: 32px;line-height: 0px;font-size:14px;text-align:center;color:#ffffff;background-color: #698dc5;border-radius: 16px;margin-left:6px;border:none;position: relative;
    bottom: 2px;"
              >
                <!-- <i class="iconfont icon-sousuo" style="margin-right: 5px;font-size:14px;"></i> -->
                查询
              </el-button>
              <data-set-query-component
                @search="search"
                ref="dataSetQueryComponent"
                :queryFields="queryFields"
              ></data-set-query-component>
            </div>
          </li>
        </ul>
      </div>
      <!--<component :is="currentTap" style="height:calc(100% - 50px)"></component>-->
      <netdiskClassify style="height:calc(100% - 50px)" :currentTap="currentTap" :paths="paths" :fileList="fileList"></netdiskClassify>
      <transition name="msgbox-fade">
        <Search v-if="dialogOptions1.dialogStatus" :diskType="diskType" :fileList="fileList" :dialogOptions1="dialogOptions1"></Search>
        <!--<Search v-if="isSearch"></Search>-->
      <!--<div v-show="isSearch" class="v-modal" tabindex="0" style="z-index: 2005;"></div>-->
      <GlobalDialog :dialogOptions="dialogOptions" @close="closeDialog" @submit="submitDialog" v-if="dialogOptions.dialogStatus">
        <div style="text-align: center;
    margin: 8px;">
          <span style="color: red;">*</span><span style="color: #999;">文件夹名称:</span>
          <el-input autofocus="true" placeholder="请输入文件夹名称" ref="folder" v-model="folderName" style="width: 230px;margin-left: 12px;">
          </el-input>
        </div>
      </GlobalDialog>
      </transition>
    </div>
  </div>
    <Loading :percentage="percentage" v-show="isUpload"></Loading>
  </div>
</template>

<script>
  import DataSetQueryComponent from "@/components/tools/DataSetQueryComponent";
  import Loading from '../documents/modules/Loading'
import netdiskClassify from "@/views/dailyOffice/NetWorkDisk/modules/netdiskClassify";
// import netdiskDocument from "@/views/dailyOffice/NetWorkDisk/modules/netdiskDocument";
// import netdiskOther from "@views/dailyOffice/NetWorkDisk/modules/netdiskOther";
// import netdiskPicture from "@views/dailyOffice/NetWorkDisk/modules/netdiskPicture";
// import netdiskVideo from "@views/dailyOffice/NetWorkDisk/modules/netdiskVideo";
import Search from './Search'
import dayjs from 'dayjs'
import GlobalDialog from '@/components/tools/GlobalDialog'
import {postAction,getAction} from '@/api/manage'
// allFiles存储所有文件 fileList  当前显示的文件
// 监听allFiles  一旦改变就重新计算fileList
export default {
  name: "Networkdisk",
  components: {
    netdiskClassify,
    // netdiskDocument,
    // netdiskOther,
    // netdiskPicture,
    // netdiskVideo,
    DataSetQueryComponent,
    Search,
    Loading,
    GlobalDialog
  },
  data() {
    return {
      queryFields: [{label: '文件名',type:'text',fieldName:'fileName'}],
      transformIcon: true,
      keyWord: '',
      isUpload:false,
      percentage:0,
      folderName: '',
      paths: [{id: '0',name:'全部文件'}],
      // 1.个人网盘  2.部门网盘
      diskType: '1',
      dialogOptions: {
        top: '',
        dialogStatus: false,
        width: '700px',
        title: '新建文件夹',
        height: 98
      },
      dialogOptions1: {
        top: '',
        dialogStatus: false,
        width: '700px',
        title: '',
        height: 100
      },
      menuMain: [
        // { name: "netdisk-classify",icon:'icon iconfont icon-xuqiu-hui', title: "全部文件" },
        { name: "all",icon:'el-icon-document-copy', title: "全部文件" },
        { name: "img",icon: 'el-icon-picture-outline', title: "图片" },
        { name: "text",icon: 'el-icon-document', title: "文档" },
        { name: "video",icon: 'el-icon-video-camera', title: "视频" },
        { name: "other",icon: 'el-icon-more', title: "其他" },
        { name: "share",icon: 'iconfont icon-fenxiang', title: "收到的分享" },
      ],
      currentTap: "all",
      fileList: [],
      allFiles: [
      ],
      file: null,
      parentId: '0',
      // department 部门  person  个人
    };
  },
  methods:{
    search (obj) {
      if(obj){
        if(obj.fileName){
          this.fileList=this.allFiles.filter(item=>item.fileName.includes(obj.fileName))
        }
        this.closeQueryField()
      }else{
        this.showFlag && this.closeQueryField()
        this.fileList=this.allFiles.filter(item=>item.fileName.includes(this.keyWord))
      }
    },
    showQueryFields() {
      this.showFlag = !this.showFlag;
      this.$refs.dataSetQueryComponent.showQueryFields(this.showFlag);
      this.transformIcon = !this.transformIcon
    },
    closeQueryField() {
      this.showFlag = false;
      this.$refs.dataSetQueryComponent.closeQueryField();
      this.transformIcon = true
    },
    changeDir (item,index) {
      this.parentId = item.id
      this.getData()
      this.paths.splice(index+1)
    },
    open (item){
      if (item.fileType==='folder'){
        this.paths.push({id: item.id,name:item.fileName})
        this.parentId = item.id
        console.log(item.id)
        this.getData()
      }else{
        const a = document.createElement('a')
        a.target = '_blank'
        a.href=item.filePath
        a.click()
      }
    },
    getData(){
      this.axios.get('/dailyOffice/netDisk/list',{params:{diskType:this.diskType,fileType:this.currentTap,parentId:this.parentId}}).then(res=>{
        const list = res.result
        const baseUrl = window._CONFIG['imgDomainURL'] + '/'
        list.forEach(item=>{
          item.isActive=false
          item.fileType!=='folder'&&(item.filePath=baseUrl+item.filePath)
        })
        this.allFiles = list
        this.fileList = this.allFiles
        // if (this.currentTap === 'all') {
        //   this.fileList = this.allFiles
        // } else {
        //   this.fileList = this.allFiles.filter(item => item.fileType === this.currentTap)
        // }
      })
    },
    createFolder(){
      this.dialogOptions.dialogStatus = true
      this.$nextTick(()=>{
        this.$refs.folder.focus()
      })
    },
    closeDialog () {
      console.log('close')
      this.dialogOptions.dialogStatus = false
      this.folderName = ''
    },
    submitDialog () {
      const folderName = this.folderName
      if (folderName.trim() === ''){
        this.$message({
          type: 'warning',
          message: '文件夹名称不能为空'
        });
        return
      }
      const list = this.allFiles.filter(item=>item.fileType==='folder')
      const res = list.find(item=>item.fileName === folderName)
      if (res) {
        this.$message({
          type: 'warning',
          message: '文件夹已存在'
        });
        return
      }
      this.dialogOptions.dialogStatus = false
      postAction('/dailyOffice/netDisk/add',{
        parentId: this.parentId,
        fileType: 'folder',
        fileName: folderName,
        diskType: this.diskType
      }).then(res=>{
        this.$message({
          type: 'success',
          message: '新建文件夹成功'
        });
        const result = res.result
        result.shareList = []
        result.isActive=false
        this.allFiles.push(result)
        this.fileList = this.allFiles
      })
      this.folderName = ''
    },
    changeRole (val) {
      this.diskType = val
      this.changeTap({name:'all'})
    },
    deleteFile () {
      const allFiles = this.allFiles
      const list = allFiles.filter(item => item.isActive === true)
      const len = list.length
      console.log(list)
      if (len===0){
        this.$message({
          type: 'warning',
          message: '请选择删除的文件'
        });
        return
      }
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
        const copy = list.slice()
        const currentTap = this.currentTap
        copy.forEach(item => {
          const data = currentTap === 'share'?{id:item.id,fileType:'share'}:{id:item.id}
          postAction('/dailyOffice/netDisk/delete',data)
          const index = allFiles.findIndex(val => val.id === item.id)
          console.log(index)
          allFiles.splice(index, 1)
        })
        this.fileList= this.allFiles
      }).catch(() => {
          // this.$message({
          //   type: 'info',
          //   message: '已取消删除'
          // });
        });
        },
    share () {
      const list = this.fileList.filter(item => item.isActive === true)
      const len = list.length
      if (len===0){
        this.$message({
          type: 'warning',
          message: '请选择分享的文件'
        });
        return
      }
      let name = list[0].fileName
      if (len > 1) {
        name = name + '等'
      }
      // this.shareName = '分享文件(夹): ' + name
      this.dialogOptions1.title = '分享文件(夹): ' + name
      this.dialogOptions1.dialogStatus = true
    },
    changeFile () {
      const file = this.file.files[0]
      const formData = new FormData()
      formData.append('file', file)
      formData.append('parentId', this.parentId)
      formData.append('fileSize', file.size)
      formData.append('diskType', this.diskType)
      let fileType = 'other'
      let fileName = file.name
      console.log(file.type)
      if (file.type.indexOf('image')!==-1) {
        fileType = 'img'
      } else if (file.type.indexOf('text')!==-1) {
        fileType = 'text'
      } else if (file.type.indexOf('video')!==-1) {
        fileType = 'video'
      }
      formData.append('fileType', fileType)
      const list = this.fileList
      const result = list.find(item=>item.fileName === fileName)
      if(result){
        const index = fileName.lastIndexOf('.')
        const val=dayjs().format('_YYYYMMDD_HHmmss')
        if(index===-1){
          fileName += val
        } else {
          const last = fileName.slice(index)
          fileName = fileName.replace(last,val + last)
        }
      }
      formData.append('fileName', fileName)
      this.axios.defaults.timeout = 50000
      const conf = {
        onUploadProgress: e => {
          this.percentage = (e.loaded / e.total * 100 | 0)
        }
      }
      this.isUpload = true
      this.axios.post('/dailyOffice/netDisk/diskUpload',formData,conf).then(res=>{
        const data = res.result
        const baseUrl = window._CONFIG['imgDomainURL'] + '/'
        data.shareList=[]
        data.isActive = false
        data.filePath=baseUrl+data.filePath
        this.allFiles.push(data)
        this.fileList=this.allFiles
        this.percentage = 0
        this.isUpload = false
        this.$message({
          type: 'success',
          message: '上传成功'
        });
      })
      // this.allFiles.push({id: Math.random().toString().slice(2,5),type: 'img',isActive: false, name: file.name, url: reader.result})
      this.file = null
    },
    upload () {
      this.file = document.createElement('input')
      let file = this.file
      file.type='file'
      file.name='file'
      file.onchange = this.changeFile
      file.click()
    },
    changeTap (menu) {
      this.paths = [{id: '0',name:'全部文件'}]
      this.parentId = '0'
      this.currentTap=menu.name
      this.getData()
    },
    download(){
      const list = this.fileList.filter(item => item.isActive === true)
      const len = list.length
      if (len===0){
        this.$message({
          type: 'warning',
          message: '请选择下载的文件'
        });
        return
      }
      list.forEach(item=>{
        if(item.fileType==='folder'){
          this.$message({
            type: 'warning',
            message: '不支持下载文件夹'
          });
        }else {
          this.$message({
            type: 'success',
            message: '下载成功'
          });
          const a = document.createElement('a')
          a.target = '_blank'
          a.download=''
          a.href=item.filePath
          a.click()
        }
      })
    }
  },
  created() {
    this.getData()
  },
  watch: {
    '$route.path'(val){
      this.changeRole(val.slice(-1))
    }
  },
};
</script>

<style lang="scss" scoped>
  .button-search:hover {
    opacity: 0.8;
  }
  /deep/ #search {
    background-color: #698dc5;
    border-radius: 16px;
    border: none;
    height: 32px;
    line-height: 32px;
    color: white;
  }
  .input_style {
    width: 310px;
    height: 32px;
    margin-left: 16px;
    bottom: 2px;
  }
  .input_style {
    width: 310px;
    height: 32px;
    margin-left: 16px;
    bottom: 2px;
  }
  .head{
    display: inline-block;
    width: 78px;
    height: 38px;
    border: 1px solid #36a5ff;
    color: #36a5ff;
    font-size: 12px;
    text-align: center;
    line-height: 38px;
    cursor: pointer;
  }
  .head-active{
    background: #36a5ff;
    color: #fff;
  }
  .btn{
    display: inline-block;
    height: 32px;
    line-height: 32px;
    color: #fff;
    font-size: 14px;
    padding: 0 20px;
    border-radius: 16px;
    margin: 24px 10px 30px;
    cursor: pointer;
  }
  .btn:hover{
    opacity: .8;
  }
  #btn-white:hover{
    opacity: 1;
    background-color: #ecf5ff;
    color: #409eff;
    border-color: #c6e2ff;
  }
  .btn-danger{
    background: rgb(231, 76, 60);
  }
  .btn-primary{
    background: #36a5ff;
  }
  .btn-success{
    background: rgb(45, 193, 192);
  }
  .btn-gray{
    background: rgb(105, 141, 197);
  }
  #btn-white{
    background: #fff;
    color: #606266;
    border: 1px solid #DCDFE6;
  }
  .netdisk-content{
    margin-left: 30px;
    /*border-left: 1px solid #ddd;*/
    /*border: 1px solid #ccc;*/
    border-radius: 8px;
    overflow: hidden;
  }
  ul,li {
    padding: 0;
    margin: 0;
    list-style: none;
  }
  .netdisk-list-container {
    padding: 1%;
    background: #eee;
    height: 710px;
    // margin-bottom: 30px;
    display: flex;
    .netdisk-menu {
      /*margin-left: 1%;*/
      background: rgb(249,250,251);
      /*border: 1px solid #ddd;*/
      border-radius: 8px;
      overflow: hidden;
      height: 100%;
      flex: 1;
      .netdisk-menu-main {
        font-size: 16px;
        ul {
          // border-bottom: 1px solid #e9e9e9;
          li {
            height: 36px;
            color: #666;
            line-height: 36px;
            text-align: left;
            padding-left: 14%;
            cursor: pointer;
            span {
              margin-left: 7%;
              font-size: 16px;
            }
          }
          li:hover{
            color: #36a5ff;
          }
          .is-active {
            background-color: #36a5ff;
            color: #fff;
          }
          .is-active:hover{
            color: #fff;
          }
        }
      }
    }

    /*.netdiskMenu:hover{*/
      /*background-color: #09AAFF;*/
       /*color: #36a5ff;*/
    /*}*/
    .netdisk-handle{
      height: 86px;
      flex: 6.35;
      border-bottom: 1px solid #e9e9e9;
      background-color: rgb(249,250,251)
    }

    /*.netdisk-handle-li>.icon:hover{*/
      /*border: 1px solid #36a5ff;*/
      /*color: #36a5ff;*/
    /*}*/
    .netdisk-handle-li>.icon{
      border: 1px solid transparent;
    }
    .netdisk-content {
      background: #fff;
      height: 100%;
      flex: 6.35;
    }
  }
  /deep/ .el-upload-list{
    display: none!important;
  }
</style>



